<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8" th:charset="'UTF-8'">
    <title>Title</title>
    <link th:replace="~{public::layui}">
    <style>
        .layui-form h4{font-size: 18px;color: #389ec5;font-weight: normal;line-height: 27px;margin-bottom: 5px;}
        .layui-form h4 a{color: #389ec5;overflow: hidden;white-space: nowrap;word-wrap: normal;text-overflow: ellipsis;}
        .layui-form h4 a:hover{text-decoration: underline;}
    </style>
</head>
<body>
<br>
<br>
<form class="layui-form">
    <input type="hidden" id="id" class="layui-input" th:value="${task.id}" readonly>
    <h4><span>任务名:</span><b th:text="${task.taskinfo.title}"></b></h4>
    <div>
        <span>任务报酬：￥</span> <b th:text="${task.taskinfo.reword}"></b>
    </div>
    <div>
        <div class="layui-inline">
            <label class="layui-form-label">发布时间:</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" th:value="${#dates.format(task.createTime, 'yyyy-MM-dd HH:mm:ss')}" readonly>
            </div>
         </div>
        <div class="layui-inline">
            <label class="layui-form-label">截止时间:</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input layui-input-inline" id="end" th:value="${#dates.format(task.endTime, 'yyyy-MM-dd HH:mm:ss')}" readonly>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">倒计时:</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input layui-input-inline" id="time" readonly>
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">任务内容:</label>
            <div class="layui-input-inline" style="width: 400px">
                <textarea th:text="${task.taskinfo.content}" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">联系方式:</label>
            <div class="layui-input-block">
                <input type="text" class="layui-input layui-input-inline"  th:value="${task.taskinfo.contact}" readonly>
            </div>
        </div>
    </div>
    <div  style="text-align: center;width: 100%">
        <div class="layui-btn layui-btn-normal" onclick="accept()">接收</div>
    </div>
</form>
<script>
    var $ = layui.jquery
    var laydate = layui.laydate
    var util = layui.util
    var thisTimer, setCountdown = function(y, M, d, H, m, s){
        var endTime = new Date(y, M||0, d||1, H||0, m||0, s||0) //结束日期
            ,serverTime = new Date(); //假设为当前服务器时间，这里采用的是本地时间，实际使用一般是取服务端的
        clearTimeout(thisTimer);
        util.countdown(endTime, serverTime, function(date, serverTime, timer){
            var str = date[0] + '天' + date[1] + '时' +  date[2] + '分' + date[3] + '秒';
            $('#time').val(str);
            thisTimer = timer;
        });
    };
    $(function (){
        let date = new Date($("#end").val());
        setCountdown(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours(), date.getMinutes(), date.getSeconds())
    })
    laydate.render({
        elem: '#end'
        ,type: 'datetime'
    });
    function accept(){
        let id = parseInt($("#id").val());
        $.ajax({
            type:'put'
            ,url:'[[@{/task/accept}]]?id='+id
            ,contentType:'application/json'
            ,success(rs){
                if (rs.code == 0){
                    parent.layer.msg("接受成功",{icon:6})
                    let index = parent.layer.getFrameIndex(window.name)
                    parent.layer.close(index)
                }else {
                    layer.msg("接受失败",{icon:5})
                }
            },error(e){
                layer.msg("接受失败",{icon:5})
            }
        })
        return false;
    }
</script>
</body>
</html>